<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="运维管理—综合管理"></Header>
   
    <!-- 搜索栏 -->
    <section class="search_bar">
      <LInput label="计划单号" v-model="planID"></LInput>
      <LInput label="任务单号" v-model="taskID" style="margin-left: 20px"></LInput>
      <LInput label="任务名称" v-model="taskName" style="margin-left: 20px"></LInput>
      <LSelect label="设备类型" :value="type" :options="option1" style="margin-left: 20px" @selected-event="getNewSelected1"></LSelect>
      <LInput label="设备编号" v-model="no" style="margin-left: 20px"></LInput>
      <LInput label="设备名称" v-model="name" style="margin-left: 20px"></LInput>
    </section>
    <section class="search_bar">
      <LInput label="设备安装位置" v-model="position"></LInput>
      <LInput label="单位部门" v-model="dep" style="margin-left: 20px"></LInput>
      <LInput label="负责人" v-model="person" style="margin-left: 20px"></LInput>
      <LSelect label="状态" :value="state" :options="option2" style="margin-left: 20px" @selected-event="getNewSelected2"></LSelect>
      <LDateTimeSelect3 label="开始时间" style="margin-left: 20px" :value="startTime" @subtime-event="getNewTime1" />
      <LDateTimeSelect3 label="结束时间" style="margin-left: 20px" :value="endTime" @subtime-event="getNewTime2" />
    </section>
    <section class="search_bar">
      <LButton label="查询数据"></LButton>
      <LButton label="重置条件" style="margin-left: 20px" @click="clearSelected"></LButton>
      <LButton label="导出数据" style="margin-left: 20px" @click="exportExecl"></LButton>
    </section>
    <!-- 表格 -->
    <el-table :data="tableData1" style="width: 100%" border>
      <el-table-column prop="a" label="计划单号" width="150" />
      <el-table-column prop="b" label="任务单号" width="150" />
      <el-table-column prop="c" label="任务名称" />
      <el-table-column prop="d" label="设备名称" />
      <el-table-column prop="e" label="设备编码" />
      <el-table-column prop="f" label="设备安装位置" />
      <el-table-column prop="g" label="责任单位部门" />
      <el-table-column prop="h" label="责任人" width="100" />
      <el-table-column prop="j" label="执行人" width="100" />
      <el-table-column prop="k" label="计划时间" />
      <el-table-column prop="l" label="结束时间" />
      <el-table-column prop="m" label="状态" width="100" />
      <el-table-column label="操作" width="140">
        <template #default>
          <el-button type="primary" size="mini">编辑</el-button>
          <el-button type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Header from '@/components/Header'
import moment from "moment";
import LInput from "../../../components/LInput.vue";
import LDateTimeSelect2 from "../../../components/LDateTimeSelect2.vue";
import LDateTimeSelect3 from "../../../components/LDateTimeSelect3.vue";
import LButton from "../../../components/LButton.vue";
import LSelect from "@/components/LSelect.vue";
import CsvExportor from "csv-exportor"; //导出csv

export default {
  components: {
    Header,
    LInput,
    LDateTimeSelect2,
    LDateTimeSelect3,
    LButton,
    LSelect,
  },
  data() {
    return {
      planID: "",
      taskID: "",
      taskName: "",
      type: "1",
      no: "",
      name: "",
      position: "",
      dep: "",
      person: "",
      state: "",
      state: "1",
      startTime: "",
      endTime: "",

      option1: [
        {
          value: "1",
          label: "全部",
        },
        {
          value: "2",
          label: "冷水机组",
        },
        {
          value: "3",
          label: "循环水泵",
        },
        {
          value: "4",
          label: "冷却塔",
        },
        {
          value: "5",
          label: "电动阀门",
        },
        {
          value: "6",
          label: "空调箱",
        },
        {
          value: "7",
          label: "变压器",
        },
      ],
      option2: [
        {
          value: "1",
          label: "全部",
        },
        {
          value: "2",
          label: "待接单",
        },
        {
          value: "3",
          label: "执行中",
        },
        {
          value: "4",
          label: "完成",
        },
        {
          value: "5",
          label: "取消",
        },
        {
          value: "6",
          label: "超时",
        },
      ],
      tableData1: [
        {
          a: "02",
          b: "检查机组运行噪声",
          c: "冷水机组",
          d: "检查空调机组运转时声音和震动是否正常",
          e: "是/否",
          f: "运行声音或震动是否正常",
          g: "",
          k:"2022-03-02 16:56:45"
        },
      ],
    };
  },
  mounted() {
 
  },
  beforeUnmount() {
  
  },
  methods: {
    //获取设备类型
    getNewSelected1(m) {
      this.type = m;
    },
    //获取状态
    getNewSelected2(m) {
      this.state = m;
    },
    //获取开始时间
    getNewTime1(t) {
      this.startTime = t;
    },
    //获取结束时间
    getNewTime2(t) {
      this.endTime = t;
    },
    //清空筛选条件
    clearSelected() {
      console.log("点击清空按钮");
      this.planID = "";
      this.taskID = "";
      this.taskName = "";
      this.type = "1";
      this.no = "";
      this.name = "";
      this.position = "";
      this.dep = "";
      this.person = "";
      this.state = "1";
      this.startTime = "";
      this.endTime = "";
    },
    //导出数据
    exportExecl() {
      let tableData = this.tableData1;
      let header = [
        "计划单号",
        "任务单号",
        "任务名称",
        "设备名称",
        "设备编码",
        "设备安装位置",
        "责任单位部门",
        "责任人",
        "执行人",
        "计划时间",
        "结束时间",
        "状态",
      ];
      CsvExportor.downloadCsv(tableData, { header }, "综合管理.xls");
    },
  },
};
</script>

<style lang="less" scoped>
@import "../opera.less";

.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
</style>
